<template>
	<view class="filter">
		<view class="filter_nav sticky">
			<view class="filter_nav_item">
				<view class="filter_nav_item_name">
					推荐排序 <rui-icons type="down-full" size="22"></rui-icons>
				</view>
			</view>
			<view class="filter_nav_item">
				<view class="filter_nav_item_name">
					线路玩法 <rui-icons type="down-full" size="22"></rui-icons>
				</view>
			</view>
			<view class="filter_nav_item">
				<view class="filter_nav_item_name">
					旅游天数 <rui-icons type="down-full" size="22"></rui-icons>
				</view>
			</view>
			<view class="filter_nav_item">
				<view class="filter_nav_item_name">
					全部筛选 <rui-icons type="down-full" size="22"></rui-icons>
				</view>
			</view>
		</view>
		<!-- <view class="filter_body" :style="`top: ${top}rpx`">
			2222
		</view> -->
		<!-- <view class="filter_mask" :style="`top: ${top}rpx`"></view> -->
	</view>


</template>

<script setup>
	import {
		ref,
		onMounted,
		getCurrentInstance
	} from "vue"
	let top = ref(0)


	onMounted(() => {
		const instace = getCurrentInstance();
		const query = uni.createSelectorQuery().in(instace.proxy)
		query.select(".sticky").boundingClientRect(function(data) {
			top.value = (data.top + data.height) * 2
		}).exec();
	})
</script>

<style lang="scss" scoped>
	.filter {

		&_body {
			background: #fff;
			padding: 20rpx;
			border-bottom-left-radius: 30rpx;
			border-bottom-right-radius: 30rpx;
			position: absolute;
			// top: 0;
			left: 0;
			width: calc(100% - 40rpx);
			z-index: 10;
			box-shadow: 0 15rpx 15rpx rgba(0, 0, 0, .1);
		}

		&_mask {
			background: rgb(0 0 0 / 0.4);
			width: 100%;
			height: 100%;
			position: fixed;
			// top: 0;
			bottom: 0;
			z-index: 9;
		}

		&_nav {
			display: flex;
			justify-content: space-between;
			margin: 20rpx;

			&_item {
				&_name {
					font-size: 28rpx;
				}
			}
		}
	}
</style>